<template>
	<view class="content" v-if="show==1">
		<view class="main">
			<view class="info">
				<view class="info2" style="height:60px;line-height: 60px;">头像</view>
				<view class="info3" style="height:60px;line-height: 60px;">
					<image @click="aa" :src="user.avatar" mode="aspectFill"/>
				</view>
			</view>
			<view class="info">
				<view class="info2">昵称</view>
				<view class="info3">
					<input type="text" @input="nickname" placeholder="请填写昵称" :value="user.nickname"/>
				</view>
			</view>
			<view class="info">
				<view class="info2">账号</view>
				<view class="info3">
					<input type="text" style="color:#666;" disabled="true" :value="user.mobile"/>
				</view>
			</view>
			<view class="info">
				<view class="info2">姓名</view>
				<view class="info3">
					<input type="text" @input="name" placeholder="请填写真实姓名" :value="user.name"/>
				</view>
			</view>
			<view class="info">
				<view class="info2">性别</view>
				<view class="info3">
					<picker @change="bindPickerChange" :value="user.sex" :range="sex">
						{{sex[user.sex]}}
					</picker>
				</view>
			</view>
			<view class="info">
				<view class="info2">城市</view>
				<view class="info3">
					<picker mode ="multiSelector" @columnchange="sheng" @change="chengshi" :value="cy" :range="city">
						<text v-if="cy[0]>0">{{diqu[cy[0]].name}}{{diqu[cy[0]].shi[cy[1]]}}</text>
						<text v-if="cy[0]==0">请选择城市</text>
					</picker>
				</view>
			</view>
			
			<view class="info4" @click="baocun">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	var app=getApp();
	export default {
		data() {
			return {
				show:0,
				uid:0,
				city:[],
				cy:[0,0],
				sex:[],
				user:[]
			}
		},
		onLoad() {
			const uid = uni.getStorageSync('uid');
			if(app.isBlank(uid)==true){
				app.error_msg("请先登录");
			}
			this.uid=uid;
			this.getdata();
		},
		methods: {
			getdata(){
				var that=this;
				uni.showLoading({
				    title: '数据加载中'
				});
				uni.request({
				    url: app.globalData.url+"user/info",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: {uid:that.uid},
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code!=1){
							app.error_msg(res.data.msg);
						}
						that.user=res.data.data.user
						that.sex=res.data.data.sex
						that.city=res.data.data.city
						that.diqu=res.data.data.sheng
						that.cy=res.data.data.index
						that.show=1;
				    }
				});
			},
			baocun(){
				var that=this;
				if(app.isBlank(this.user.nickname)==true){
					uni.showToast({
					    title: "请填写昵称",
						icon:'none',
					    duration: 1500
					});
					return false;
				}
				uni.showLoading({
				    title: '保存中'
				});
				
				that.user.sheng=this.city[0][this.cy[0]];
				that.user.shi=this.city[1][this.cy[1]];
				var u=JSON.stringify(that.user);
				u=JSON.parse(u)
				u.uid=that.uid;
				uni.request({
				    url: app.globalData.url+"user/doinfo",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: u,
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code!=1){
							uni.showToast({
							    title: res.data.msg,
								icon:'none',
							    duration: 1500
							});
							return false;
						}
						uni.showToast({
						    title: res.data.msg,
							icon:'success',
						    duration: 1000
						});
						setTimeout(function(){
							uni.switchTab({
							    url: '/pages/user/index'
							});
						},1000)
				    }
				});
			},
			aa(){
				var that=this;
				uni.showActionSheet({
				    itemList: ['使用相机', '访问相册'],
				    success: function (res) {
						that.img(res.tapIndex);
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
			},
			img(t){
				var that=this;
				if(t==0){
					var lx=["camera"];
				}else{
					var lx=["album"];
				}
				uni.chooseImage({
				    count: 1,
					sourceType:lx,
				    success: function (res) {
				        const tempFilePaths = res.tempFilePaths;
						uni.showLoading({
						    title: '上传中'
						});
						uni.uploadFile({
							url: app.globalData.url+'upload/uploadImg',
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								uni.hideLoading();
								var str=JSON.parse(uploadFileRes.data)
								if(str.code!=1){
									uni.showToast({
									    title: res.data.msg,
										icon:'none',
									    duration: 1500
									});
									return false;
								}
								uni.showToast({
								    title: str.msg,
									icon:'success',
								    duration: 1000
								});
								that.user.avatar=str.data.image;
							}
						});
				    },
					fail(e){
						console.log(e);
					}
				});
			},
			bindPickerChange: function(e) {
				this.user.sex = e.target.value
			},
			chengshi: function(e) {
				this.cy=e.detail.value;
			},
			sheng: function(e) {
				if(e.detail.column==0){
					this.city[1]=this.diqu[e.detail.value].shi;
					
					this.$forceUpdate();
				}
			},
			nickname: function(event) {
			    this.user.nickname = event.target.value
			},
			name: function(event) {
			    this.user.name = event.target.value
			}
		}
	}
</script>

<style>
	.input-value-border{border:0px!important;text-align: right;}
	.info3 picker{height:40px;text-align: right;line-height: 40px;}
	.info4{width:94%;margin:0px 3%;height:40px;line-height: 40px;text-align: center;background-color: #05c160;border-radius: 5px;margin-top: 20px;color:#fff;}
	.info3 image{width:45px;height:45px;margin-top: 7.5px;border-radius: 50%;float: right;}
	.info3 input{width:100%;height:40px;text-align: right;font-size: 0.85rem;color:#333;}
	.info3{width:100%;height:40px;flex:1;}
	.info2{width:80px;height:40px;line-height: 40px;margin-right: 5px;}
	.info{width:94%;padding: 0px 3%;display: flex;border-bottom: 1px rgb(245, 245, 245) solid;}
	.main{width:100%;}
</style>
